<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>12_指令_自定义指令</title>
	</head>
	<body>

		<!--
			1. 注册全局指令
			Vue.directive('my-directive', function(el, binding){
				el.innerHTML = binding.value.toupperCase()
			})			  
			  
			2. 注册局部指令
			directives : {
				'my-directive' : {
					bind (el, binding) {
					  el.innerHTML = binding.value.toupperCase()
					}
				}
			}
			
			3. 使用指令
			v-my-directive='xxx'
		-->
		
		<!--
			需求: 自定义2个指令
			  1. 功能类型于v-text, 但转换为全大写
			  2. 功能类型于v-text, 但转换为全小写
		-->

		<div id="test">
			<p v-upper-text="msg"></p>
			<p v-lower-text="msg"></p>
		</div>

		<div id="test2">
			<p v-upper-text="msg"></p>
			
			<!-- lower-text是在#test中定义的，故不能在此处生效 -->
			<p v-lower-text="msg"></p>
		</div>

		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			
			// 注册一个全局指令
			// el: 指令所在的标签对象
			// binding: 包含指令相关数据的容器对象
			/*Vue.directive('upper-text', function(el, binding) {
				console.log(el, binding)
				el.textContent = binding.value.toUpperCase()
			}) 
			*/
			Vue.directive('upper-text',function(el,binding){
				el.textContent = binding.value.toUpperCase();
			})
			
			new Vue({
				el: '#test',
				data: {
					msg: "I Like You CR"
				},
				
				// 注册局部指令
				directives: {
					'lower-text'(el, binding) {
						console.log(el, binding)
						el.textContent = binding.value.toLowerCase()
					}
				}

			})

			new Vue({
				el: '#test2',
				data: {
					msg: "I Like You Too GQZ"
				}
			})
		</script>
	</body>
</html>
